<template>
	<view class="page">
		<view class="header">
			<view class="title">
				欢迎注册疫情管控程序
			</view>
		</view>
		<view class="input-log">
			<uni-forms ref="form" :rules="rules" :model="formData" labelWidth="80px">
				<uni-forms-item label="姓名" required name="name">
					<uni-easyinput v-model="formData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item required label="手机号" name="phone">
					<uni-easyinput v-model="formData.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="身份证号" required name="idNumber">
					<uni-easyinput v-model="formData.idNumber" placeholder="请输入身份证号" />
				</uni-forms-item>
				<uni-forms-item required label="密码" name="password">
					<uni-easyinput v-model="formData.password" placeholder="请输入密码" type="password" />
				</uni-forms-item>
				<uni-forms-item required label="确认密码" name="password2">
					<uni-easyinput v-model="formData.password2" placeholder="请输入密码" type="password" />
				</uni-forms-item>
				<uni-forms-item required label="您的身份" name="role">
					<uni-data-picker v-model="formData.role" :localdata="roleRange" popup-title="选择身份"
						@change="onchange">
					</uni-data-picker>
				</uni-forms-item>
			</uni-forms>
			<view class="btn-log">
				<button type="primary" @click="submit">注册</button>
			</view>

		</view>
	</view>
</template>

<script>
	import request from '@/utils/api.js'
	export default {
		data() {
			return {
				formData: {
					name: '',
					phone: '',
					idNumber: '',
					password: '',
					password2: '',
					role: 0,
					type: ''
				},
				roleRange: [{
					text: "在校学生",
					value: 0,
				}, {
					text: "教师职工",
					value: 1,
				}, {
					text: "驻地人员",
					value: 2,
				}, {
					text: "临时来访",
					value: 3,
				}],
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '账号不能为空'
						},
						{
							minLength: 11,
							maxLength: 11,
							errorMessage: '手机号长度需为{maxLength}'
						}]
					},
					idNumber: {
						rules: [{
								required: true,
								errorMessage: '身份证号不能为空'
							},
							{
								minLength: 18,
								maxLength: 18,
								errorMessage: '身份证长度需为{maxLength}'
							}
						]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
					password2: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value !== data.password) {
									callback('两次密码不一致')
								}
								return true
							}
						}]
					},
					role: {
						rules: [{
							required: true,
							errorMessage: '身份不能为空'
						}]
					}
				}
			}
		},
		methods: {
			onchange(e) {
				const value = e.detail.value
				this.formData.type = value['0'].text
				// console.log('选择数据',this.formData.type)
			},
			submit() {
				uni.showLoading()
				let that = this
				this.$refs.form.validate().then(res => {
					uni.hideLoading()
					if (that.formData.type !== '') {
						console.log('表单验证成功，表单数据信息为：', res);
					} else {
						uni.showToast({
							icon: 'error',
							title: '请选择你的身份'
						});
						return
					}
					console.log('data', that.formData);
					request('/my/register', {
						phone: that.formData.phone,
						idCard: that.formData.idNumber,
						name: that.formData.name,
						password: that.formData.password,
						type: that.formData.role
					}, 'POST').then(res => {
						console.log('注册响应', res);
						if (res.code !== 200) {
							uni.showToast({
								icon: 'error',
								title: res.msg
							})
							return
						}
						//注册成功将基本信息填入userInfo

						uni.showToast({
							icon: 'success',
							title: '注册成功'
						});
						// 注册成功之后跳转页面
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}).catch(err=>{
						// console.log('err',err)
					})

				}).catch(err => {
					uni.hideLoading()
					// console.log('表单验证失败，表单错误信息为：', err);
				})
			}
		}
	}
</script>

<style scoped>
	.header {
		height: 3vh;
		padding: 8vh 8vw;
	}

	.title {
		margin: 1vh 0;
		font-size: 24px;
		font-weight: 700;
		text-align: center;
	}

	.input-group {
		padding: 15px;
		background-color: #fff;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.input-log {
		padding: 15px;
		background-color: #fff;
	}
</style>
